Do you have a widget that needs

• some background style, maybe a background color
• shape
• or some size constraints?

Try wrapping it in a Container Widget. It helps you compose, decorate and position child widgets.

Color

If you wrap your widget in a container widget without any other parameters, you won’t notice any difference in appearance but if you add the color parameter, your child widget will get a background color.

Container(
   child: Text('Container Widget'),
   color: Colors.blue
);

Without anything else, the container sizes itself to its child.

Padding

Use the container’s padding property to add empty space between the child widget and the container boundary.

Container(
   child: Text('Container Widget'),
   color: Colors.blue,
   padding: EdgeInsets.all(20.0),
);

Margin

Use the margin property to add empty space that surrounds the widget.

Container(
   child: Text('Container Widget'),
   color: Colors.blue,
   padding: EdgeInsets.all(20.0),
   margin: EdgeInsets.all(20.0),
);

Lets remove the Center widget that wrapped the container widget so that you can get a better idea of the container’s margin property.

Decoration

Use the decoration property to add a shape to your container like a circle.

Container(
   child: Text('Container Widget'),
   decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.blue,
   ),
   padding: EdgeInsets.all(50.0),
   margin: EdgeInsets.all(25.0),
);

The decoration is by default sized to the container’s child. In this case, the container fits the circle decoration to the narrowest parameter, the text widget’s height. You can style the decoration with margin and padding, just like before.

Alignment, Width & Height

Use the alignment property to align the child within the container (The text within the text box in this case). Once you set alignment, the container will expand to fill its parent’s width and height. You can override this by setting the container’s width and height properties.

Container(
   child: Text('Container Widget'),
   color: Colors.blue,
   alignment: Alignment.center,
   width: 200,
   height: 100,
);

Transform

The transform applies a slight rotation to the entire contraption to complete the effect. Let us rotate our container to add more flavor to this design.

Container(
   child: Text('Container Widget'),
   color: Colors.blue,
   width: 200.0,
   height: 200.0,
   transform: Matrix4.rotationZ(0.05),
);

Let us use some more properties to decorate our container widget.

import 'package:flutter/material.dart';

void main() => runApp(const HomePage());

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Material App Title",
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Awesome App Title"),
        ),
        body: Center(
          child: Container(
            padding: const EdgeInsets.all(8),
            alignment: Alignment.center,
            width: 150,
            height: 100,
            transform: Matrix4.rotationZ(0.05),
            decoration: BoxDecoration(
                //shape: BoxShape.circle,
                borderRadius: BorderRadius.circular(10),
                boxShadow: const [
                  BoxShadow(
                      color: Colors.blueGrey,
                      blurRadius: 5,
                      offset: Offset(2.0, 5.0)),
                ],
                color: Colors.teal,
                gradient:
                    const LinearGradient(colors: [Colors.yellow, Colors.pink])),
            child: const Text(
              "Container Widget",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 20,
              ),
            ),
          ),
        ),
      ),
    );
  } //build
} //HomePage

Comments

comments